#ifndef WEBP_PAGE_H
#define WEBP_PAGE_H

/*************************************************************************************
 * HTML Pages (web pages)
 *************************************************************************************/

#define INDEX_PAGE                                                      \
    "HTTP/1.1 200 OK\r\n"                                               \
    "Content-Type: text/html; charset=utf-8\r\n"                        \
    "Connection: close\r\n"                                             \
    "Refresh: 5\r\n"                                                    \
    "\r\n"                                                              \
    "<!DOCTYPE html>"                                                   \
    "<html>"                                                            \
    "<head>"                                                            \
    "<meta charset=\"UTF-8\">"                                          \
    "<title>Air Quality Monitor</title>"                                \
    "<style>"                                                           \
    "  body {"                                                          \
    "    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;" \
    "    background-color: #f5f7fa;"                                    \
    "    margin: 0;"                                                    \
    "    padding: 20px;"                                                \
    "    color: #333;"                                                  \
    "  }"                                                               \
    "  .header {"                                                       \
    "    text-align: center;"                                           \
    "    margin-bottom: 30px;"                                          \
    "    color: #2c3e50;"                                               \
    "  }"                                                               \
    "  .cards {"                                                        \
    "    display: flex;"                                                \
    "    justify-content: center;"                                      \
    "    flex-wrap: wrap;"                                              \
    "    gap: 20px;"                                                    \
    "    margin-bottom: 30px;"                                          \
    "  }"                                                               \
    "  .card {"                                                         \
    "    background: white;"                                            \
    "    border-radius: 10px;"                                          \
    "    box-shadow: 0 4px 12px rgba(0,0,0,0.1);"                       \
    "    padding: 20px;"                                                \
    "    width: 200px;"                                                 \
    "    text-align: center;"                                           \
    "    transition: transform 0.3s;"                                   \
    "  }"                                                               \
    "  .card:hover {"                                                   \
    "    transform: translateY(-5px);"                                  \
    "  }"                                                               \
    "  .card.co2 {"                                                     \
    "    border-top: 4px solid #4CAF50;"                                \
    "  }"                                                               \
    "  .card.pm25 {"                                                    \
    "    border-top: 4px solid #2196F3;"                                \
    "  }"                                                               \
    "  .value {"                                                        \
    "    font-size: 32px;"                                              \
    "    font-weight: bold;"                                            \
    "    margin: 10px 0;"                                               \
    "  }"                                                               \
    "  .co2 .value { color: #4CAF50; }"                                 \
    "  .pm25 .value { color: #2196F3; }"                                \
    "  .unit {"                                                         \
    "    font-size: 16px;"                                              \
    "    color: #777;"                                                  \
    "  }"                                                               \
    "  .footer {"                                                       \
    "    text-align: center;"                                           \
    "    margin-top: 20px;"                                             \
    "    color: #7f8c8d;"                                               \
    "    font-size: 14px;"                                              \
    "  }"                                                               \
    "</style>"                                                          \
    "</head>"                                                           \
    "<body>"                                                            \
    "<div class='header'>"                                              \
    "  <h1>Air Quality Dashboard</h1>"                                  \
                                                                        \
    "</div>"                                                            \
    "<div class='cards'>"                                               \
    "  <div class='card co2'>"                                          \
    "    <h2>CO2</h2>"                                                  \
    "    <div class='value'>%u</div>"                                   \
    "    <div class='unit'>ppm</div>"                                   \
    "    <div>Carbon Dioxide</div>"                                     \
    "  </div>"                                                          \
                                                                        \
    "  <div class='card pm25'>"                                         \
    "    <h2>PM2.5</h2>"                                                \
    "    <div class='value'>%u</div>"                                   \
    "    <div class='unit'>μg/m³</div>"                                 \
    "    <div>Particulate Matter</div>"                                 \
    "  </div>"                                                          \
    "</div>"                                                            \
                                                                        \
    "<div class='footer'>"                                              \
    "  <p>Data updates every 5 seconds | Next refresh in 5 seconds</p>" \
    "</div>"                                                            \
    "</body>"                                                           \
    "</html>"

#define HTTP_RESPONSE_404 \
    "HTTP/1.1 404 Not Found\r\n" \
    "Content-Type: text/html\r\n" \
    "Connection: close\r\n" \
    "\r\n" \
    "<html><body>Page Not Found</body></html>"

#endif
